<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue属性绑定基础</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .demo-section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
      }
      .image-demo img {
        max-width: 200px;
        margin: 10px;
      }
      .link-demo a {
        margin: 10px;
        display: inline-block;
      }
      .input-demo input {
        margin: 10px;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>Vue属性绑定演示</h2>

      <!-- 基础属性绑定 -->
      <div class="demo-section">
        <h3>1. 基础属性绑定</h3>

        <!-- 图片src绑定 -->
        <div class="image-demo">
          <p>动态图片：</p>
          <img v-bind:src="currentImage" v-bind:alt="imageAlt" />
          <br />
          <button @click="changeImage">切换图片</button>
        </div>

        <!-- 链接href绑定 -->
        <div class="link-demo">
          <p>动态链接：</p>
          <a :href="dynamicUrl" :target="linkTarget">{{linkText}}</a>
          <br />
          <input v-model="dynamicUrl" placeholder="输入URL" />
          <label>
            <input type="checkbox" v-model="openInNewTab" />
            新窗口打开
          </label>
        </div>

        <!-- 表单属性绑定 -->
        <div class="input-demo">
          <p>表单属性绑定：</p>
          <input
            :type="inputType"
            :placeholder="inputPlaceholder"
            :disabled="isDisabled"
            :readonly="isReadonly"
            v-model="inputValue"
          />
          <br />
          <select v-model="inputType">
            <option value="text">文本</option>
            <option value="password">密码</option>
            <option value="email">邮箱</option>
            <option value="number">数字</option>
          </select>
          <label>
            <input type="checkbox" v-model="isDisabled" />
            禁用
          </label>
          <label>
            <input type="checkbox" v-model="isReadonly" />
            只读
          </label>
        </div>
      </div>

      <!-- 布尔属性绑定 -->
      <div class="demo-section">
        <h3>2. 布尔属性绑定</h3>
        <button :disabled="isButtonDisabled">{{isButtonDisabled ? '已禁用' : '可点击'}}</button>
        <input type="checkbox" :checked="isChecked" @change="isChecked = !isChecked" />
        <input type="text" :required="isRequired" placeholder="必填字段" />

        <br />
        <br />
        <label>
          <input type="checkbox" v-model="isButtonDisabled" />
          禁用按钮
        </label>
        <label>
          <input type="checkbox" v-model="isRequired" />
          必填字段
        </label>
      </div>

      <!-- 多个属性绑定 -->
      <div class="demo-section">
        <h3>3. 多个属性绑定</h3>
        <div v-bind="multipleAttrs">多属性绑定的div</div>
        <br />
        <button @click="updateAttrs">更新属性</button>
      </div>

      <!-- 动态属性名 -->
      <div class="demo-section">
        <h3>4. 动态属性名</h3>
        <input :[attributeName]="attributeValue" placeholder="动态属性演示" />
        <br />
        <select v-model="attributeName">
          <option value="placeholder">placeholder</option>
          <option value="title">title</option>
          <option value="data-info">data-info</option>
        </select>
        <input v-model="attributeValue" placeholder="属性值" />
      </div>
    </div>

    <script>
      const { createApp, ref, computed } = Vue

      const App = {
        setup() {
          // 图片相关
          const images = [
            'https://via.placeholder.com/200x150/ff6b6b/ffffff?text=Image1',
            'https://via.placeholder.com/200x150/4ecdc4/ffffff?text=Image2',
            'https://via.placeholder.com/200x150/45b7d1/ffffff?text=Image3'
          ]
          const currentImageIndex = ref(0)
          const currentImage = computed(() => images[currentImageIndex.value])
          const imageAlt = computed(() => `示例图片 ${currentImageIndex.value + 1}`)

          // 链接相关
          const dynamicUrl = ref('https://vuejs.org')
          const openInNewTab = ref(false)
          const linkTarget = computed(() => (openInNewTab.value ? '_blank' : '_self'))
          const linkText = computed(() => `访问 ${dynamicUrl.value}`)

          // 表单相关
          const inputType = ref('text')
          const inputPlaceholder = computed(() => {
            const placeholders = {
              text: '请输入文本',
              password: '请输入密码',
              email: '请输入邮箱',
              number: '请输入数字'
            }
            return placeholders[inputType.value]
          })
          const isDisabled = ref(false)
          const isReadonly = ref(false)
          const inputValue = ref('')

          // 布尔属性
          const isButtonDisabled = ref(false)
          const isChecked = ref(false)
          const isRequired = ref(false)

          // 多属性绑定
          const multipleAttrs = ref({
            id: 'multi-attrs',
            class: 'highlight',
            style: 'padding: 10px; background: lightblue;',
            'data-info': '多属性绑定示例'
          })

          // 动态属性名
          const attributeName = ref('placeholder')
          const attributeValue = ref('动态属性值')

          // 方法
          const changeImage = () => {
            currentImageIndex.value = (currentImageIndex.value + 1) % images.length
          }

          const updateAttrs = () => {
            multipleAttrs.value = {
              ...multipleAttrs.value,
              style: `padding: 15px; background: ${Math.random() > 0.5 ? 'lightcoral' : 'lightgreen'};`,
              'data-info': `更新时间: ${new Date().toLocaleTimeString()}`
            }
          }

          return {
            currentImage,
            imageAlt,
            dynamicUrl,
            openInNewTab,
            linkTarget,
            linkText,
            inputType,
            inputPlaceholder,
            isDisabled,
            isReadonly,
            inputValue,
            isButtonDisabled,
            isChecked,
            isRequired,
            multipleAttrs,
            attributeName,
            attributeValue,
            changeImage,
            updateAttrs
          }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
